<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>数据库表信息</title>
		<link type="text/css" rel="stylesheet" href="../static/css/layui.css" />
		<link type="text/css" rel="stylesheet" href="../static/font/myFont/iconfont.css">

		<style>
			body {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
				background-color: #fafafa;
			}

			.bg {
				padding: 30px;
				display: flex;
				justify-content: center;
				height: 80%;
			}

			.leftBox {
				background-color: white;
				height: 445px;
				border: 1px solid #dee2e6;
				border-radius: 0.625rem;
			}

			.dbNameBox {
				padding: 10px 10px 0 10px;
			}

			.dbNameStyle {
				font-size: 10px;
				font-weight: 600;
				padding: 3px 8px;
				text-shadow: none;
				background-color: #1ab394;
				color: #FFFFFF;
			}

			.tableInfo {
				background-color: white;
				position: relative;
				overflow-x: hidden;
			}

			.rightBox {
				background-color: white;
				height: 445px;
				padding: 10px;
				border: 1px solid #dee2e6;
				border-radius: 0.625rem;
			}

			.form-control {
				padding: 3px 6px 4px;
				height: 30px;
			}

			.btuRadius {
				border-radius: 10px;
			}

			.attributeStyle {
				width: 110px;
				cursor: pointer;
				height: 28px;
				border-radius: 6px;
				border: 1px solid #eee;
				color: #757575;
				padding-left: 3px;
			}

			.selectInput {
				width: 100px;
				cursor: pointer;
				height: 28px;
				border-radius: 6px;
				border-style: solid;
				border-color: #eee;
				color: #757575;
			}

			.leftTableName {
				position: relative;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 100%;
				height: 25px;
				font: 17px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
				background-color: #fafafa;
				margin-bottom: 2px;
				padding: 3px 0 0px 10px;
				color: #181817;
			}

			.leftTableName:hover {
				color: white;
				background-color: #00aaff;
				cursor: pointer;
			}

			.ecjetForm {
				display: grid;
				place-items: center;
			}

			.layui-form-label {
				position: relative;
				float: left;
				display: block;
				padding: 9px 15px;
				width: 100px;
				font-weight: 400;
				line-height: 20px;
				text-align: right;
			}

			.codeStyle {
				margin: 10px;
			}

			.operation-content-save {
				width: 100%;
				text-align: center;
			}

			.returnDiv {
				text-align: center;
				margin-top: 20px;
			}

			.returnDiv button {
				background-color: burlywood;
			}
		</style>
	</head>
	<body>
		<div id="lovexhjImage" style="width: 220px;height: 60px; margin: 0 auto;">
			<!-- 左边的图片 -->
			<img src="../static/img/l.jpg" alt="love" style="width: 60px; border-radius: 50%;">
			<!-- 中间的图片 -->
			<img src="../static/img/love.gif" alt="love" style="width: 50px; border-radius: 50%;">
			<!-- 右边的图片 -->
			<img src="../static/img/g.jpg" alt="love" style="width: 60px; border-radius: 50%;">
		</div>

		<input type="hidden" id="dbInfo" th:value="${dbInfo}" />

		<div class="layui-row bg">
			<div class="layui-col-md12">
				<div class="layui-row">
					<div class="layui-col-md2 leftBox">
						<div class="dbNameBox">
							<span>数据库名称：</span>
							<span class="dbNameStyle" id="dbName" th:text="${dbName}"></span>
						</div>
						<hr />
						<div class="tableInfo">
							<!-- 表名 -->
							<ul id="tableNames"></ul>
						</div>
					</div>
					<div class="layui-col-md10 rightBox">
						<!-- 表详情信息 -->
						<table id="table" lay-filter="table"></table>
					</div>
				</div>
				<div class="returnDiv">
					<button class="layui-btn layui-btn-sm" onclick="back()">返回列表</button>
				</div>
			</div>
		</div>

		<!-- 表头按钮组 -->
		<script type="text/html" id="toolbar">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-sm btuRadius" lay-event="getCheckData">生成后端代码</button>
				<button class="layui-btn layui-btn-sm btuRadius layui-btn-normal" lay-event="getData">生成前端代码</button>
			</div>
		</script>

		<!-- 对应java属性 -->
		<script type="text/html" id="javaAttribute">
			<input type="text" name="{{d.LAY_INDEX}}_attribute" class="attributeStyle" value="{{d.javaAttribute}}">
		</script>

		<!-- javaTypeInput -->
		<script type="text/html" id="javaType">
			<select name="{{d.LAY_INDEX}}_javaType" class="selectInput" value="" lay-ignore lay-filter="javaTypeFilter">
				<option value="Integer" {{d.javaType == 'Integer' ? 'selected':''}}>Integer</option>
				<option value="Long" {{d.javaType == 'Long' ? 'selected':''}}>Long</option>
				<option value="String" {{d.javaType == 'String' ? 'selected':''}}>String</option>
				<option value="Float" {{d.javaType == 'Float' ? 'selected':''}}>Float</option>
				<option value="Double" {{d.javaType == 'Double' ? 'selected':''}}>Double</option>
				<option value="BigDecimal" {{d.javaType == 'BigDecimal' ? 'selected':''}}>BigDecimal</option>
				<option value="Boolean" {{d.javaType == 'Boolean' ? 'selected':''}}>Boolean</option>
				<option value="Date" {{d.javaType == 'Date' ? 'selected':''}}>Date</option>
			</select>
		</script>

		<!-- queryCheck查询条件 -->
		<script type="text/html" id="queryCheck">
			<input type="checkbox" name="{{d.LAY_INDEX}}_query" value="{{d.query}}" lay-skin="switch" lay-text="是|否"
				lay-filter="queryCheck" {{ d.query == true ? 'checked' : '' }}>
		</script>

		<!-- queryType -->
		<script type="text/html" id="queryType">
			<select name="{{d.LAY_INDEX}}_queryType" class="selectInput" value="" lay-ignore lay-filter="queryTypeFilter">
				<option value="NULL"> 无 </option>
				<option value="EQUAL"> = </option>
				<option value="LESS">
					< </option>
				<option value="LESSEQUAL">
					<= </option>
				<option value="GREATER"> > </option>
				<option value="GREATEREQUAL"> >= </option>
				<option value="LIKE"> like </option>
			</select>
		</script>

		<!-- 弹出层form -->
		<script type="text/html" id="eject_form">
			<br>
			<form class="layui-form" action="" id="createForm">
				<div class="layui-col-md12 ecjetForm">
					<div class="layui-form-item  layui-col-md11">
						<label class="layui-form-label">创建者名称：</label>
						<div class="layui-input-block">
							<input name="author" class="layui-input" style="width: 95%;" type="text" placeholder="请输入创建者名称"
								autocomplete="off" lay-verify="author">
						</div>
					</div>
					<div class="layui-form-item  layui-col-md11">
						<label class="layui-form-label">接口描述：</label>
						<div class="layui-input-block">
							<input name="describe" class="layui-input" style="width: 95%;" type="text" placeholder="请输入接口描述"
								autocomplete="off" lay-verify="describe">
						</div>
					</div>
					<div class="layui-form-item  layui-col-md11">
						<label class="layui-form-label">生成文件路径：</label>
						<div class="layui-input-block">
							<input name="filePath" class="layui-input" style="width: 95%;" type="text" placeholder="请输入生成文件路径(src之前)"
								autocomplete="off" lay-verify="filePath">
						</div>
					</div>
					<div class="layui-form-item  layui-col-md11">
						<label class="layui-form-label">包路径：</label>
						<div class="layui-input-block">
							<input name="packageRoute" class="layui-input" style="width: 95%;" type="text" placeholder="请输入包路径(com开始,到模块名结束)"
								autocomplete="off" lay-verify="packageRoute">
						</div>
					</div>
					<div class="layui-form-item  layui-col-md11">
						<label class="layui-form-label">模块名称：</label>
						<div class="layui-input-block">
							<input name="modularName" class="layui-input" style="width: 95%;" type="text" placeholder="请输入模块名称"
								autocomplete="off" lay-verify="modularName">
						</div>
					</div>
				</div>
			</form>
			<div class="layui-col-md12 ecjetForm">
				<div>
					<button class="layui-btn layui-btn-normal" onclick="createCodePreview()">生成预览</button>
					<button class="layui-btn" onclick="colseLayer()">取消</button>
				</div>
			</div>
		</script>

		<script type="text/javascript" src="../static/js/layui.js"></script>
		<script>
			var dbInfo, dbName, layer, $, tableData = [],
				currentTableName, table, currentIndex;
				
			// 返回数据库列表
			function back(){
				window.location.href = "/get/source";
			}

			// 设置选中样式
			function setCurrentLiStyle(name) {
				if (currentTableName != undefined && currentTableName != '') {
					let doc = document.getElementById("left_li_" + currentTableName);
					doc.style.backgroundColor = '#fafafa';
					doc.style.color = '#181817';
					doc.onmouseover = function() {
						if (doc.innerText != currentTableName) {
							doc.style.backgroundColor = '#00aaff';
							doc.style.color = '#ffffff';
						}
					};
					doc.onmouseout = function() {
						if (doc.innerText != currentTableName) {
							doc.style.backgroundColor = '#fafafa';
							doc.style.color = '#181817';
						}
					};
				}
				let newDoc = document.getElementById("left_li_" + name);
				newDoc.style.backgroundColor = '#1AB394';
				newDoc.style.color = '#ffffff';
				currentTableName = name;
			}

			// 加载表信息
			function getDbTableColumn(table, tableName) {
				dbName = "[[${dbName}]]";
				if (dbName == undefined || dbName == '') {
					return;
				}
				$.ajax({
					url: "/query/table/column?dbName=" + dbName + "&tableName=" + tableName,
					async: false, //同步方式发送请求，true为异步发送
					type: "GET",
					data: {},
					dataType: "json",
					success: function(result) {
						if (result.length != 0) {
							createTable(result);
							tableData = result;
							// window.location.reload();
						} else {
							layer.msg("加载表信息失败");
						}
					},
				});
			}

			function createTable(tableData) {
				table.render({
					toolbar: '#toolbar',
					elem: "#table",
					data: tableData,
					// ,url: '../../demo/table/user/-page=1&limit=30.js' //数据接口
					page: false, //关闭分页
					// height: 'full-190', // 这里full是？
					height: '400',
					defaultToolbar: [],
					cols: [
						[{
							type: 'checkbox',
							fixed: 'left'
						}, {
							field: "position",
							title: "序号",
							width: 60,
							sort: false,
						}, {
							field: "name",
							title: "字段列名",
							width: 140,
							sort: false,
						}, {
							field: "javaAttribute",
							title: "对应java属性名",
							width: 140,
							sort: false,
							templet: "#javaAttribute"
						}, {
							field: "isNullable",
							title: "能否为空",
							width: 90,
							sort: false,
						}, {
							field: "type",
							title: "数据类型",
							width: 120,
							sort: false,
						}, {
							field: "javaType",
							title: "java类型",
							width: 130,
							sort: false,
							unresize: true,
							templet: "#javaType"
						}, {
							field: "length",
							title: "数据长度",
							width: 90,
							sort: false,
						}, {
							field: "columnKey",
							title: "是否主键",
							width: 90,
							sort: false,
						}, {
							field: "extra",
							title: "是否自增",
							width: 90,
							sort: false,
						}, {
							field: "query",
							title: "查询条件",
							templet: "#queryCheck",
							width: 90,
							sort: false,
							unresize: true
						}, {
							field: "queryType",
							title: "查询方式",
							toolbar: "#queryType",
							width: 130,
							sort: false,
							unresize: true
						}, {
							field: "comment",
							title: "字段描述",
							width: 150,
							sort: false
						}, {
							field: "delft",
							title: "默认值",
							width: 100,
							sort: false,
						}]
					],
					even: true,
				});
			}

			// 取消form弹框
			function colseLayer() {
				layer.closeAll();
			}

			// 请求生成代码
			function createCodePreview() {
				let t = $('#createForm').serializeArray();
				let jsData = {};
				t.forEach(e => {
					jsData[e.name] = e.value
				});

				if (jsData.filePath == undefined || jsData.filePath == "") {
					layer.msg("文件路径不能为空", {
						icon: 5
					});
					return;
				}

				if (jsData.packageRoute == undefined || jsData.packageRoute == "") {
					layer.msg("包路径不能为空", {
						icon: 5
					});
					return;
				}

				if (jsData.modularName == undefined || jsData.modularName == "") {
					layer.msg("模块名称不能为空", {
						icon: 5
					});
					return;
				}

				let list = [];
				tableData.forEach(e => {
					let temp = e;
					Reflect.deleteProperty(temp, 'LAY_CHECKED');
					Reflect.deleteProperty(temp, 'LAY_TABLE_INDEX');
					list.push(temp);
				});
				jsData["columList"] = list;

				// 调用后端生成接口
				$.ajax({
					url: "/temp/create/preview",
					async: false, //同步方式发送请求，true为异步发送
					type: "POST",
					data: JSON.stringify(jsData),
					contentType: 'application/json;charset=utf-8',
					dataType: "JSON",
					success: function(result) {
						if (result) {
							// 关闭弹框
							layer.close(currentIndex);
							layer.tab({
								area: ['1000px', '600px'],
								tab: [{
									title: 'Controller',
									content: "<div class='codeStyle'><pre class=\"layui - code \">" +
										result.controllerResult + "</pre></div>"
								}, {
									title: 'Service',
									content: "<div class='codeStyle'><pre class=\"layui - code \">" +
										result.serviceResult + "</pre></div>"
								}, {
									title: 'Mapper',
									content: "<div class='codeStyle'><pre class=\"layui - code \">" +
										result.mapperResult + "</pre></div>"
								}, {
									title: 'Model',
									content: "<div class='codeStyle'><pre class=\"layui - code \">" +
										result.modelResult + "</pre></div>"
								}, {
									title: 'dto',
									content: "<div class='codeStyle'><pre class=\"layui - code \">" +
										result.dtoResult + "</pre></div>"
								}, {
									title: 'query',
									content: "<div class='codeStyle'><pre class=\"layui - code \">" +
										result.queryResult + "</pre></div>"
								}]
							});
						} else {
							layer.msg("生成代码失败");
						}
					},
				});
			}

			layui.use(["layer", "table"], function() {
				table = layui.table;
				$ = layui.jquery;
				layer = layui.layer;
				var form = layui.form;

				dbInfo = $("#dbInfo").val();
				// dbInfo = "sys_tem,user,menu,sys_log,sys_class,men_usyer";
				if (dbInfo != null && dbInfo != "") {
					let arr = dbInfo.split(",");
					let str = "";
					arr.forEach(e => {
						let newStr =
							"<li><div id='left_li_" + e + "' class='leftTableName'>" + e + "</div></li>\n";
						str += newStr;
					});
					$("#tableNames").html(str);

					// 设置第一个选中
					setCurrentLiStyle(arr[0]);

					// 去加载数据
					getDbTableColumn(table, arr[0]);

				}

				// 查询条件
				form.on('switch(queryCheck)', function(obj) {
					let query;
					if (obj.elem.checked) {
						query = true;
						layer.tips('添加此列做查询条件', obj.othis);
					} else {
						query = false;
						layer.tips('取消此列做查询条件', obj.othis);
					}
					let index = (obj.elem.name.split("_"))[0] - 1;
					tableData[index].query = query;
				});

				// 表头按钮组
				table.on('toolbar(table)', function(obj) {
					// select选中的值放入tableData中
					$(".selectInput").each(function() {
						let sel = this;
						let arr = sel.name.split("_");
						let index = arr[0] - 1;
						tableData[index][arr[1]] = sel.value;
					});

					var id = obj.config.id;
					var checkStatus = table.checkStatus(id);
					var othis = lay(this);
					// 生成后端
					if (obj.event == "getCheckData") {
						// 获取选中数据
						var data = checkStatus.data;
						if (data == null || data.length == 0) {
							layer.msg("请至少选中一条数据", {
								icon: 5
							});
						} else {
							// 弹框填写必须信息
							currentIndex = layer.open({
								title: '路径相关信息',
								type: 1,
								skin: 'layui-layer-demo', //样式类名
								closeBtn: 2, //不显示关闭按钮
								anim: 2,
								shadeClose: true, //开启遮罩关闭
								area: ['930px', '400px'],
								// content: layui.util.escape(JSON.stringify(data))
								content: $('#eject_form').html()
							});
						}
					}

					// 生成前端
					if (obj.event == "getData") {
						var getData = table.getData(id);
						// layer.alert(layui.util.escape(JSON.stringify(getData)));
						layer.alert(layui.util.escape(JSON.stringify(tableData)));
						// layer.alert("该功能即将上线，敬请期待");
					}
				});

				// 监听右边表
				$(document).on('click', "#tableNames li div", function(vaule) {
					let tableName = this.innerText;
					if (tableName != currentTableName) {
						setCurrentLiStyle(tableName);
						tableData = [];
						getDbTableColumn(table, tableName);
					}
				})

				// 对应java属性
				$(".attributeStyle").blur(function(val) {
					let index = val.currentTarget.name.split("_")[0] - 1;
					tableData[index].javaAttribute = val.currentTarget.value;
				});
			});
		</script>
	</body>
</html>
